<template>
  <svg :class="['yy-icon', `yy-icon-${svgValue.substr(1)}`, `yy-icon-${size}`, className]" aria-hidden="true" v-on="$listeners">
       <use :xlink:href="svgValue" />
  </svg>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';

export default defineComponent({
    props: {
        iconClass: {
            type: String,
            required: true
        },
        size: {
            type: String,
            default: 'md',
            validator: (v: string) => ['xxs', 'xs', 'sm', 'md', 'lg'].includes(v)
        },
        // color: {
        //     type: String
        // },
        className: {
            type: String
        }
    },
    setup(props) {
        const svgValue = computed(() => `#icon-${props.iconClass}`)
        return {
            svgValue
        }
    }
})
</script>

<style lang="less" scoped>
.yy-icon-xxs {
    width: 15px;
    height: 15px;
}
.yy-icon-xs {
    width: 18px;
    height: 18px;
}
.yy-icon-sm {
    width: 21px;
    height: 21px;
}
.yy-icon-md {
    width: 22px;
    height: 22px;    
}
.yy-icon-lg {
    width: 36px;
    height: 36px; 
}

</style>